<template>
    <div>
        <el-submenu :index="index + ''" class="menu-border">
            <template slot="title">
                <i class="my-menu-icon" :class="menu.meta.icon"></i>
                <span>{{ menu.meta.menuName }}</span>
            </template>
            <div v-for="(menuChildren,childrenIndex) in menu.children" :key="childrenIndex" class="my-submenu">
                <el-menu-item  :index="menuChildren.path" v-if="menuChildren.path" class="my-submenu">
                    <i class="my-menu-icon" :class="menuChildren.meta.icon"></i>
                    <span slot="title">{{ menuChildren.meta.menuName }}</span>
                </el-menu-item>
                <MenuItem v-else :menu="menuChildren" :index="index + '-' + childrenIndex"></MenuItem>
            </div>

        </el-submenu>
    </div>
</template>
<script>
export default {
    name: "MenuItem",
    props: ['menu','index']
}
</script>